<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的生词本 - Essay Helper</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container dashboard-container">
        <header class="dashboard-header">
            <div class="logo">
                <h1><i class="fas fa-book-reader"></i> Essay Helper</h1>
            </div>
            <div class="user-nav">
                <span class="username"><i class="fas fa-user-circle"></i> {{ current_user.username }}</span>
                <a href="{{ url_for('logout') }}" class="logout-btn"><i class="fas fa-sign-out-alt"></i> 登出</a>
            </div>
        </header>
        
        <div class="dashboard-content">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="flash-message {{ category }}">
                            {% if category == 'error' %}
                                <i class="fas fa-exclamation-circle"></i>
                            {% else %}
                                <i class="fas fa-check-circle"></i>
                            {% endif %}
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <div class="dashboard-nav">
                <a href="{{ url_for('index') }}" class="dashboard-nav-item">
                    <i class="fas fa-home"></i> 首页
                </a>
                <a href="{{ url_for('dashboard') }}" class="dashboard-nav-item active">
                    <i class="fas fa-book"></i> 我的生词本
                </a>
            </div>
            
            <div class="vocabulary-section">
                <div class="section-header">
                    <h2><i class="fas fa-book"></i> 我的生词本</h2>
                    <div class="vocabulary-actions">
                        <span class="word-count">{{ vocabulary_count }} 个单词</span>
                        {% if vocabulary_count > 0 %}
                        <a href="{{ url_for('download_vocabulary') }}" class="action-btn">
                            <i class="fas fa-download"></i> 下载生词本
                        </a>
                        {% endif %}
                    </div>
                </div>
                
                <div class="vocabulary-content">
                    {% if vocabulary %}
                    <ul class="word-grid">
                        {% for word in vocabulary %}
                        <li>{{ word }}</li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <div class="empty-state">
                        <i class="fas fa-info-circle"></i>
                        <p>您的生词本目前为空</p>
                        <p class="empty-state-desc">上传PDF，查找并添加单词到您的生词本</p>
                        <a href="{{ url_for('index') }}" class="action-btn"><i class="fas fa-upload"></i> 上传PDF</a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <footer>
            <p><i class="fas fa-code"></i> PDF processing tools for students and researchers</p>
        </footer>
    </div>
</body>
</html> 